import React from 'react';
import { Badge as AntdBadge } from 'antd';
import type { BadgeProps as AntdBadgeProps } from 'antd';
import { createStyles } from 'antd-style';

export interface BadgeProps extends AntdBadgeProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  badge: css`
    .ant-badge-count {
      background-color: ${token.colorError};
    }
  `,
}));

const BadgeComponent: React.FC<BadgeProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const badgeClassName = cx(
    className,
    customClassName,
    styles.badge
  );

  return <AntdBadge className={badgeClassName} {...restProps} />;
};

type BadgeType = typeof BadgeComponent & {
  Ribbon: typeof AntdBadge.Ribbon;
};

const Badge = BadgeComponent as BadgeType;
Badge.Ribbon = AntdBadge.Ribbon;

export { Badge };
export default Badge;

